<template>
    <div class="container">
      <h2>光遇打卡景点<br>____________________________</h2>
      <div class="desc">
      <ul>
      <li v-for="(item, index) in pwd3" :key="index" class="a"> 
          
            <img :src="getImgUrl(item.imgs)" alt=""  class="image-item">
            
          </li>
      </ul>
      </div>
    </div>
  
  
  </template>
  
  
  <script>
  import axios from 'axios'
  //import pwd3 from '../public/pwd3.json'
  import { ref ,onMounted } from 'vue';
  
  
   export default {
      setup() {
        const pwd3 = ref(null);
        onMounted(() => {
          axios.get('../public/pwd3.json')
           .then(response => {
              pwd3.value = response.data
            })
           .catch(error => {
              console.log(error)
            })
        });
        const getImgUrl = (imgs) => {
          //用相对路径
          return new URL('../assets/img/' + imgs, import.meta.url).href
        }
        return {
          pwd3,
          getImgUrl
        }
      }
   }
  
  </script>
  
  <style scoped>
  .container {
    max-width: 640rpx;
    margin: 0 auto;
    padding: 20rpx;
  }
  
  h2{
      font-family: "华文琥珀";
      font-size: 40px;
      color: #FF6600;
    font-weight: normal;
  }
  .a{
      font-size: 0px;/*取消小圆点*/
  }
  .desc ul{
      display: flex;/*设置ul为flex布局*/
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .desc li{
      list-style: none;
      margin-bottom: 20rpx;
      position: relative;
      
  }
  img{
      width: 350px;
      height: 250px;
      margin-bottom: 10px;/*图片间距*/
  }
  
  </style>